<template>
	<div class="index_main">
		<!-- 登录弹窗 -->
		<div v-if="showLogin">
	  		<LoginWindow @changeShow = "getModel(arguments)"></LoginWindow>
	  	</div>

		<!-- 头部的搜索 -->
	    <div class="index_search" @click="toSearch">
	    	<div class="icon">
	    		<img src="http://r.photo.store.qq.com/psc?/V13kx5iq3fGNrB/h4SLI6MeeCc7mRdKk01usuPmvHBeVXUDIlHWilE5Fmzq3osZtZzKkKkfzFT2gAOcRXTq3YKnTCnyCyeU9YHZJST6xMqkLuGXsvSy4Y8sFUM!/r">
	    	</div>
	    	<div class="search">
	    		<input type="text" placeholder="搜索商品" />
	        	<span class="search_icon"></span> 
	    	</div>	        	   
	    </div>

	    <!-- 轮播 -->
		<div class="swiper">
	      	<swiper class="swiper_content" indicator-dots="true" autoplay="true" interval="3000" circular="true" >
		        <block v-for="(item, index) in banner" :key="index" >
		          	<swiper-item class="swiper_item" @click="bannerList(index)">
		            	<image class="slide_image" :src="item.image_url"/>
		          	</swiper-item>
		        </block>
		      </swiper>
	    </div>

	    <!-- 头部Nav -->
	    <div class="headNav">
	    	<div class="nav_item" @click="toHeadlist(index)" v-for="(item,index) in headArr" :key="index">
	    		<img :src="item.icon_url">
	    		<p>{{item.name}}</p>
	    	</div>	    	    		    	
	    </div>

		<!-- 新品首发 -->
		<div class="newgoodNav">
	      	<div class="newgoods_top" @click="toGoodsKind('new')">
		        <div class="top">
		          	<p>新品首发</p>
		          	<p>更多</p>
		        </div>
	     	</div>
	      	<div class="list">
		        <ul>
		          	<scroll-view class="scroll-view" :scroll-x="true">
		            	<li v-for="(item ,index) in newgoodsArr" :key="index" @click="goodsDetail(item.id)">
			              	<img :src="item.list_pic_url" alt="">
			              	<p>{{item.name}}</p>
			              	<p>{{item.goods_brief}}</p>
			             	<p>¥{{item.retail_price}}</p>
		            	</li>
		          	</scroll-view>
		        </ul>
		    </div>
   	 	</div>

		<!-- 人气精选 -->
		<div class="hotgoodsNav">
			<div class="hot_top" @click="toGoodsKind('hot')">
				<div class="top">
					<p>人气精选</p>
					<p>查看全部</p>
				</div>
			</div>
			<div class="list">
				<div class="item" v-for="(item, index) in hotgoodsArr" :key="index" 
				@click="goodsDetail(item.id)">		      	
		        	<img :src="item.list_pic_url" alt="">
		        	<div>
		        		<p class="name">{{item.name}}</p>
		        		<p class="brief">{{item.goods_brief}}</p>
		        		<p class="price">¥ {{item.retail_price}}</p>	
		        	</div>	        		      	
	    		</div>	 
			</div>  		   		    
		</div>
	</div>
</template>

<script type="text/javascript">
import LoginWindow from '@/components/LoginWindow'
import {get} from '@/util'
export default {
	components: {
	    LoginWindow
	  },	  
	//数据
	data() {
	  	return {
	  		userinfo: {},//用户信息
     		showLogin: false, //控制登录弹窗
     		banner: [],//轮播图
     		headArr:[],//头部Nav
     		newgoodsArr:[],//新品首发
     		hotgoodsArr:[], //人气推荐
	  	}
	},
	//生命周期 mounted created
	mounted() {		
		this.getDatas()
	    const userinfo = wx.getStorageSync('userinfo')
	    if (userinfo.openId) {
	      	this.userinfo = userinfo
	      	this.getInfo()
	      	// console.log('用户信息：', this.userinfo)
	    } else {
	      	wx.hideTabBar()
	      	this.showLogin = true
	    }
  	},
  	onShow(){
  		
  	},
	// 方法
	methods: {
		bannerList(index){
			if(index==0){
				 wx.navigateTo({
		          url: '/pages/goodsKind/main?isHot=' + 1
		        })
			}
			if(index==1){
				wx.navigateTo({
		          url: '/pages/goodsKind/main?isNew=' + 1
		        })
			}
			if(index==2){
				wx.showModal({
					title: '清仓活动时间过了哦',
					content:'看看别的活动吧~',
			  		showCancel:true,
			  		mask:true,
				})
			}
			if(index==3){
				wx.showModal({
					title: '电器活动暂时停止了哦',
					content:'看看别的活动吧~',
			  		showCancel:true,
			  		mask:true,
				})
			}
			
		},
		async getInfo(){
		    const old_id = wx.getStorageSync('id')
		    if(old_id){
		    	// console.log("id已存在")
		    }else{
		    	const data = await get('/app/user/getId', {
			        user_id: this.userinfo.openId,
			    }) 
			    var id=data.info[0].id
		    	wx.setStorageSync('id', id)
		    	// console.log("id缓存成功")
		    }		    
  		},
		//与弹窗间的通信
	  	getModel (val) {
	      	this.showLogin = val[0]
	      	this.userinfo = val[1]
	    },

	    //搜索监听方法
	    toSearch(){
	    	wx.navigateTo({
	        	url: '/pages/search/main'
	     	})
	    },

	    //获取后端数据请求方法
	    async getDatas(){
	    	try{
	    		const datas = await get('/app/index/index')
	    		//获取到图片轮播数据
		    	this.banner = datas.banner
		    	//获取到头部选项卡列表数据
		    	this.headArr = datas.headArr
		    	this.newgoodsArr = datas.newgoodsArr
		    	this.hotgoodsArr = datas.hotgoodsArr
	    	}catch(e){
	    		console.log('首页中从后端返回的执行错误的信息是：', e)
	    	}
	    },
	    //新品首发与人气推荐区
	    toGoodsKind(info){
	    	if (info == 'hot') {
		        wx.navigateTo({
		          url: '/pages/goodsKind/main?isHot=' + 1
		        })
		      } else {
		        wx.navigateTo({
		          url: '/pages/goodsKind/main?isNew=' + 1
		        })
		      }
	    },
	    //头部Nav
	    toHeadlist(index){
	    	if(index == 0){
	    		//跳到分类列表
	    		wx.switchTab({
	    			url: '/pages/category/main'
	    		})
	    	}
	    	if(index == 1){
	    		//跳到9.9商品区
	    		wx.navigateTo({
		    		url: '/pages/goodsKind/main?id=' +index
		    	})
	    	}
	    	if(index == 2){
	    		wx.navigateTo({
		    		url: '/pages/collect/main'
		    	})
	    	}	    	
	    },
	    //点击某商品跳转到详情页
	    goodsDetail(id){
	    	wx.navigateTo({
		        url: '/pages/goods/main?id=' + id
		    })
	    }
	}
}
</script>

<style lang="scss">
	@import "./index.scss";
</style>

